<template>
  <div class="immediatelyQuery item-space">
    <div class="wholeTitle borderBottom flex">
      <span>
        即时数据统计
      </span>
    </div>
    <div class="content">
      <div class="flex flex-align-center">
        <div class="top flex flex-align-center">
          <div class="tiemText">选择报告：</div>
          <el-select v-model="immdiatelyStore.reportId" filterable clearable>
            <el-option
                v-for="(item,index) in immdiatelyStore.allReportOptions"
                :value="item.id"
                :label="item.reportName"
                :key="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="top flex flex-align-center ml-5">
          <div class="tiemText">统计时间：</div>
          <el-date-picker
              v-model="immdiatelyStore.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <button class="btn-baseStyle ml-4" style="background-color:rgb(0,127,255)"
                @click="immdiatelyStore.useGetStsResultIntime()">查询
        </button>
        <button class="btn-baseStyle ml-4" style="background-color:#F88B17"
                @click="downLoad(2)">下载报告
        </button>
      </div>
      <div class="bottom mt-8 flex " v-loading="immdiatelyStore.tableLoading">
        <div class="left mr-6 tableUIReset">
          <div class="wholeTitle">{{ immdiatelyStore.rightItem.name || '' }}</div>
          <el-table
              height="490"
              v-loading="immdiatelyStore.tableLoading"
              class="mt-6"
              stripe
              :data="immdiatelyStore.rightItem.dataList"
              border
              style="width: 100%"
              header-row-class-name="rptableClassNmae"
          >
            <el-table-column prop="index" label="序号" width="90" header-align="center" align="center">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column sortable v-for="(item,index) in immdiatelyStore.rightItem.headers" :prop="item"
                             :label="item" header-align="center" align="center"/>
            <el-table-column label="操作" align="center" header-align="center">
              <template #default="scope">
                <div class="flex flex-justify-content-center">
                  <div class="tableScopeText pointer" @click="downLoad(1,scope.row,scope.$index + 1)">下载</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-scrollbar height="600" class="right">
          <right-menu
              v-if="immdiatelyStore.menuRightList.length>0"
              :default-active-id="immdiatelyStore.rightItem.id"
              :default-openeds="immdiatelyStore.defaultRightOpends"
              :menu-right-list="immdiatelyStore.menuRightList"
              @handleClick="handleClick"
          >
          </right-menu>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//组件
//接口


//api
import {reactive, ref} from 'vue';
import useImmediatelyStore from "@/store/modules/immediately/immediately";
import RightMenu from "@/components/contentRight/rightMenu.vue";
import * as XLSX from "xlsx";
import {cloneDeep} from "@/utils/cloneDeep";
//data
const immdiatelyStore = useImmediatelyStore()
/*
函数
*/

/**************************接口函数**************************/
immdiatelyStore.useGetAllStsReport()

/**************************操作函数**************************/

const handleClick = (value: any) => {
  immdiatelyStore.rightItem = value
}

const downLoad = (type: number, item?: any, index?: any) => {
  //导出明细
  let wb = XLSX.utils.book_new()
  let header: any
  header = {}
  let tableData: any
  tableData = {}
  let arr = []
  let data = []
  if (type == 1) {
    header['first'] = cloneDeep(item.detailTableHeaders)
    let newData = cloneDeep(item.detailTableData)
    for (let i in newData) {
      for (let j in newData[i]) {
        newData[i][j] = newData[i][j] == 'null' || newData[i][j] == null ? '' : newData[i][j]
      }
    }
    tableData['first'] = newData
  } else {
    immdiatelyStore.allTable.forEach((item) => {
      header[item.name] = cloneDeep(item.headers)
      tableData[item.name] = cloneDeep(item.dataList)
    })
  }


  for (let i in tableData) {
    tableData[i].forEach((item: any) => {
      delete item._dataId
    })
  }

  for (let i in header) {
    let newObj = []

    for (let key in tableData[i][0]) {
      newObj.push(key)
    }
    tableData[i].forEach((item: any) => {
      for (let j in item) {
        let idx = header[i].findIndex((headerItem:any)=>{
          return headerItem==j
        })
        if (idx==-1) {
          delete item[j]
          console.log(header[i])
        }
      }
    })
    let headerWs = XLSX.utils.aoa_to_sheet([header[i]])
    let newArr = cloneDeep(tableData[i])
    console.log(header, tableData)
    newArr.forEach((item: any, index: number) => {
      header[i].forEach((h: string, hindex: number) => {
        item[hindex] = tableData[i][index][h] + ''
        delete item[h]
      })
    })

    let ws = XLSX.utils.sheet_add_json(headerWs, newArr, {
      skipHeader: true,
      origin: 'A2'
    })
    data.push(
        {
          ws: ws,
          name: i
        }
    )
  }
  data.forEach((item) => {
    XLSX.utils.book_append_sheet(wb, item.ws, item.name)
  })
  XLSX.writeFile(wb, (type == 1 ? `序号${index}-${immdiatelyStore.rightItem.name}明细` : '即时数据统计') + `表.xlsx`)
}
</script>

<style lang="scss">
.immediatelyQuery {


  .content {

    .top {
      .tiemText {
        font-size: 18px;
      }
    }

    .bottom {
      .left {
        width: 75%;
        padding: 25px;
        background-color: rgba(247, 247, 247, 1);


      }

      .right {
        background-color: rgba(247, 247, 247, 1);
        flex: 1;

        .el-menu-vertical-demo {
          border: none;
          width: 100%;
        }
      }
    }
  }
}
</style>
